<template>
  <div class="page flex-col">
    <div class="group_fo1 flex-col">
      <div class="image-wrapper_fo1 flex-col">
        <img class="image_fo1" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/9449b193d49639a2178baba9b38e3550" />
      </div>
    </div>
    <div class="group_fo2 flex-col">
      <img class="image_fo2" referrerpolicy="no-referrer"
        src="https://lanhu-oss.lanhuapp.com/9c54bce17009f7dd98215132e8ccfdf0" />
      <div class="group_fo3 flex-col">
        <div class="group_fo4 flex-col">
          <div class="image-wrapper_fo2 flex-col" @click="goBackMain">
            <img class="label_fo1" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/1b288f9c268ca8a1ef1ec0d023ee9979" />
          </div>
          <div class="box_fo1 flex-col">
            <div class="box_fo2 flex-row">
              <img class="image_fo3" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/4ff7cde3a795606b688ae5160a22224a" />
              <span class="text_fo1">我是标题我是标题</span>
              <img class="image_fo4" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/919d27d666dd6dcd6e3f3b89def9ce57" />
            </div>
            <img class="image_fo5" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/a54c574f57b30c955caccf3b109adda1" />
          </div>
        </div>
        <img class="label_fo2" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/7c5ba8a869bf765b30da3b3400bcb7eb" />
        <div class="group_fo5 flex-col">
          <div class="block_fo1 flex-col justify-end">
            <div class="box_fo3 flex-row justify-between">
              <div class="text-wrapper_fo1 flex-col">
                <span class="text_fo2">问题描述问题描述问题描述问题描述问题描述</span>
              </div>
              <div class="section_fo1 flex-col">
                <div class="image-wrapper_fo3 flex-col">
                  <img class="image_fo6" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/ee87cb9734b3ffe03ccc1097706a3301" />
                </div>
              </div>
            </div>
            <div class="box_fo4 flex-row justify-between">
              <div class="group_fo6 flex-col">
                <div class="image-wrapper_fo4 flex-col">
                  <img class="image_fo7" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/5da9bd804c9a86c295f806a4e70a0bb1" />
                </div>
              </div>
              <div class="text-wrapper_fo2 flex-col">
                <span class="text_fo3">问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答问题解答</span>
              </div>
            </div>
            <div class="box_fo5 flex-row">
              <img class="image_fo8" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/80664badcb2859a699d6a7a21b13ae14" />
              <div class="box_fo6 flex-col"></div>
              <img class="image_fo9" referrerpolicy="no-referrer"
                src="https://lanhu-oss.lanhuapp.com/9c65c0268e89383399000f92e8b92695" />
              <div class="image-wrapper_fo5 flex-col">
                <img class="image_fo10" referrerpolicy="no-referrer"
                  src="https://lanhu-oss.lanhuapp.com/d364d07be3af23534dab921ce139ba9c" />
              </div>
              <div class="text-wrapper_fo3 flex-col">
                <el-input v-model="reportmess" class="text_fo4" placeholder="我要提问…" />
              </div>
            </div>
          </div>
          <img class="label_fo3" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/a47857c08f7eacdb4640d1cd775a37cd" />
        </div>
        <div class="group_fo7 flex-col">
          <div class="image-wrapper_fo6 flex-col">
            <img class="image_fo11" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/c6a8521390990b5e598f06de3d8f80cf" />
          </div>
        </div>
        <img class="image_fo12" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/bd46c7ad861210cb681f9d935991d8e2" />
        <img class="image_fo13" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/0b044e0fd4e2a8679810941da1cbf5c2" />
        <div class="group_fo8 flex-col">
          <div class="image-wrapper_fo7 flex-row">
            <img class="thumbnail_1" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/a4a949fbb96f157d8154bf5c65553533" />
          </div>
          <div class="text-wrapper_fo4 flex-row">
            <span class="text_fo5">有什么问题尽管问我</span>
          </div>
          <div class="image-wrapper_fo8 flex-row">
            <img class="label_fo4" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/1a0edbc40ef4aeda597616c02742ecd6" />
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import debounce from 'lodash/debounce';
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      reportmess: "",
    }
  },
  methods: {
    goBackMain() {
      this.$router.push('/anmain');
    },
    jumpToThree() {
      this.$router.push('/anmain');
    }
  },
  created() {
    console.group('创建实例之后');
    console.log('执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面');
  },
  mounted() {
    //修复加载的旋转圆圈位置下移
    console.log('mounted==>>')

  },
  watch: {
    $route(to, from) {

    }
  }
}
</script>
<style>
@import './common.css';

.page {
  position: relative;
  width: 100%;
  height: 56.25vw;
  overflow: hidden;
}

span {
  caret-color: transparent;
}

.group_fo1 {
  height: 56.25vw;
  background: url(https://lanhu-oss.lanhuapp.com/bda83cae5287c7fed539dc4106992204) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.image-wrapper_fo1 {
  height: 18.81vw;
  background: url(https://lanhu-oss.lanhuapp.com/76b73517166ec682364ec6c728902f62) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 37.45vw;
  width: 100%;
}

.image_fo1 {
  width: 100%;
  height: 13.7vw;
  margin-top: 5.11vw;
}

.group_fo2 {
  height: 46.78vw;
  background: url(https://lanhu-oss.lanhuapp.com/de984dea36055635985809c94ed2cf8a) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.image_fo2 {
  width: 100%;
  height: 4.22vw;
  margin-top: 42.82vw;
}

.group_fo3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 42.87vw;
}

.group_fo4 {
  height: 17.04vw;
  background: url(https://lanhu-oss.lanhuapp.com/a54d67a0dc0f84c14f91ab4cbb67b406) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
  position: relative;
}

.image-wrapper_fo2 {
  z-index: 1;
  cursor: pointer;
  border-radius: 50%;
  height: 4.59vw;
  border: 2px solid rgba(27, 225, 255, 1);
  width: 4.59vw;
  margin: 4.47vw 0 0 2.6vw;
}

.label_fo1 {
  width: 1.1vw;
  height: 1.98vw;
  margin: 1.3vw 0 0 1.71vw;
}

.box_fo1 {
  position: absolute;
  left: 3.23vw;
  top: 0.06vw;
  width: 93.75vw;
  height: 35.06vw;
  background: url(https://lanhu-oss.lanhuapp.com/eb027a2ca6665765bd296eb5d6afe867) 100% no-repeat;
  background-size: 100% 100%;
}

.box_fo2 {
  width: 98.13vw;
  height: 6.46vw;
  background: url(https://lanhu-oss.lanhuapp.com/94be1bb44953ffff85f3809db7151877) -0.06vw 0vw no-repeat;
  background-size: 98.17vw 6.45vw;
  margin-top: -0.05vw;
}

.image_fo3 {
  width: 10.99vw;
  height: 3.08vw;
  margin: 0.57vw 0 0 1.82vw;
}

.text_fo1 {
  text-shadow: 0px 4px 0px rgba(0, 142, 163, 0.7);
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 49.682617%,
      rgba(27, 225, 255, 1) 99.682617%,
      rgba(27, 225, 255, 1) 100%);
  width: 24.95vw;
  height: 2.92vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 3.12vw;
  font-family: AlibabaPuHuiTiB;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 2.82vw;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1.4vw 0 0 23.59vw;
}

.image_fo4 {
  width: 14.54vw;
  height: 3.49vw;
  margin: 1.19vw 3.07vw 0 19.16vw;
}

.image_fo5 {
  width: 24.74vw;
  height: 1.2vw;
  margin: -0.72vw 0 28.17vw 34.37vw;
}

.label_fo2 {
  width: 1.31vw;
  height: 1.2vw;
  margin: 14.01vw 0 10.62vw 97.81vw;
}

.group_fo5 {
  position: absolute;
  left: 7.5vw;
  top: 8.75vw;
  width: 82.92vw;
  height: 47.5vw;
  background: url(https://lanhu-oss.lanhuapp.com/d9cde7780aee39577fe066a17715a4d0) 100% no-repeat;
  background-size: 100% 100%;
}

.block_f1 {
  background-image: linear-gradient(90deg,
      rgba(0, 83, 164, 0.9) 0,
      rgba(0, 83, 164, 0.9) 50%,
      rgba(0, 83, 164, 0.772942) 50%,
      rgba(0, 83, 164, 0.9) 100%);
  width: 65.27vw;
  height: 35.63vw;
  border: 3px solid rgba(0, 0, 0, 0.9);
  margin: 11.87vw 0 0 9.89vw;
}

.block_fo1 {
  width: 65.27vw;
  height: 35.63vw;
  margin: 11.87vw 0 0 9.89vw;
}

.box_fo3 {
  width: 41.52vw;
  height: 5vw;
  margin: 2.55vw 0 0 23.07vw;
}

.text-wrapper_fo1 {
  background-color: rgba(27, 225, 255, 1);
  border-radius: 25px 25px 25px 0px;
  height: 5vw;
  width: 35.21vw;
}

.text_fo2 {
  width: 31.93vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(1, 27, 63, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 1.88vw;
  margin: 1.71vw 0 0 1.61vw;
}

.section_fo1 {
  height: 5vw;
  background: url(https://lanhu-oss.lanhuapp.com/edba6f6cedf7b95ec33ee117bbd4eae4) 100% no-repeat;
  background-size: 100% 100%;
  width: 4.95vw;
}

.image-wrapper_fo3 {
  background-color: rgba(17, 73, 109, 1);
  border-radius: 50%;
  height: 3.65vw;
  width: 3.65vw;
  margin: 0.67vw 0 0 0.62vw;
}

.image_fo6 {
  width: 2.66vw;
  height: 2.87vw;
  margin: 0.41vw 0 0 0.52vw;
}

.box_fo4 {
  width: 42.5vw;
  height: 8.6vw;
  margin: 1.87vw 0 0 -0.46vw;
}

.group_fo6 {
  height: 5vw;
  background: url(https://lanhu-oss.lanhuapp.com/4e940fe14b2564370afeb44cfc5fd5d4) 100% no-repeat;
  background-size: 100% 100%;
  width: 4.95vw;
}

.image-wrapper_fo4 {
  background-color: rgba(17, 73, 109, 1);
  border-radius: 50%;
  height: 3.65vw;
  width: 3.65vw;
  margin: 0.67vw 0 0 0.67vw;
}

.image_fo7 {
  width: 3.29vw;
  height: 2.24vw;
  margin: 0.67vw 0 0 0.2vw;
}

.text-wrapper_fo2 {
  background-color: rgba(18, 80, 119, 1);
  border-radius: 0px 25px 25px 25px;
  height: 8.6vw;
  width: 36.1vw;
}

.text_fo3 {
  width: 31.93vw;
  height: 5.27vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  line-height: 1.88vw;
  margin: 1.66vw 0 0 1.66vw;
}

.box_f5 {
  background-image: linear-gradient(90deg,
      rgba(0, 83, 164, 0.9) 0,
      rgba(0, 83, 164, 0.9) 50%,
      rgba(0, 83, 164, 0.772942) 50%,
      rgba(0, 83, 164, 0.9) 100%);
  position: relative;
  width: 65.27vw;
  height: 13.44vw;
  border: 3px solid rgba(0, 0, 0, 0.9);
  margin-top: 4.17vw;
}

.box_fo5 {
  position: relative;
  width: 65.27vw;
  height: 13.44vw;
  margin-top: 4.17vw;
}

.image_fo8 {
  width: 4.69vw;
  height: 4.69vw;
  margin: 2.39vw 0 0 2.91vw;
}

.box_fo6 {
  background-image: linear-gradient(147deg,
      rgba(18, 50, 103, 1) 0,
      rgba(18, 50, 103, 1) 0,
      rgba(18, 50, 103, 0.701961) 48.974609%,
      rgba(0, 71, 91, 1) 50%,
      rgba(6, 137, 145, 1) 100%,
      rgba(6, 137, 145, 0.8) 100%);
  border-radius: 10px;
  width: 46.15vw;
  height: 5.63vw;
  border: 1px solid #00FFCC;
  margin: 1.92vw 0 0 2.65vw;
}

.image_fo9 {
  width: 3.23vw;
  height: 3.29vw;
  margin: 3.12vw 3.43vw 0 2.18vw;
}

.image-wrapper_fo5 {
  height: 5.84vw;
  background: url(https://lanhu-oss.lanhuapp.com/94fe8a6cf8ecbf8e7d011a22c351c7c6) 100% no-repeat;
  background-size: 100% 100%;
  width: 5.84vw;
  position: absolute;
  left: 2.35vw;
  top: 1.83vw;
}

.image_fo10 {
  width: 2.14vw;
  height: 2.77vw;
  margin: 1.56vw 0 0 1.87vw;
}

.text-wrapper_fo3 {
  border-radius: 10px;
  height: 6.05vw;
  border: 1px solid #05C7F1;
  width: 47.09vw;
  position: absolute;
  left: 9.8vw;
  top: 1.72vw;
}

.text_fo4 {
  width: 42vw;
  height: 3.52vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 3.88vw;
  margin: 1.23vw 0 0 2.44vw;
}

.label_fo3 {
  position: absolute;
  left: 73.6vw;
  top: 10.99vw;
  width: 2.14vw;
  height: 2.14vw;
  border: 2px solid rgba(215, 244, 255, 1);
}

.group_fo7 {
  height: 18.96vw;
  background: url(https://lanhu-oss.lanhuapp.com/b9888091a3cf7c8aeb40afbb0b05b30c) -0.32vw 0vw no-repeat;
  background-size: 65.88vw 19.11vw;
  width: 65.27vw;
  position: absolute;
  left: 16.83vw;
  top: 0;
}

.image-wrapper_fo6 {
  height: 16.67vw;
  background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/7f89c5fb79d5403ab037ba8285315519_mergeImage.png) 100% no-repeat;
  background-size: 100% 100%;
  margin-left: 1.52vw;
  width: 62.14vw;
}

.image_fo11 {
  width: 6.25vw;
  height: 5vw;
  margin-left: 27.92vw;
}

.image_fo12 {
  position: absolute;
  left: 16.62vw;
  top: 0;
  width: 65.63vw;
  height: 16.67vw;
}

.image_fo13 {
  position: absolute;
  left: 90.21vw;
  top: 38.6vw;
  width: 9.8vw;
  height: 12.24vw;
}

.group_fo8 {
  height: 5.73vw;
  background: url(https://lanhu-oss.lanhuapp.com/39c1c1c92299d96ae485e402e391c0cd) -0.63vw -0.58vw no-repeat;
  background-size: 15.15vw 6.92vw;
  width: 13.91vw;
  position: absolute;
  left: 84.07vw;
  top: 32.56vw;
}

.image-wrapper_fo7 {
  width: 0.63vw;
  height: 0.68vw;
}

.thumbnail_1 {
  width: 0.63vw;
  height: 0.68vw;
}

.text-wrapper_fo4 {
  width: 12.45vw;
  height: 1.31vw;
  margin: 0.88vw 0 0 0.78vw;
}

.text_fo5 {
  width: 12.45vw;
  height: 1.31vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.88vw;
}

.image-wrapper_fo8 {
  width: 1.46vw;
  height: 1.41vw;
  margin: 1.4vw 0 0.05vw 7.39vw;
}

.label_fo4 {
  width: 1.46vw;
  height: 1.41vw;
}

/* 去除背景 */
.el-input__wrapper {
  background-color: transparent;
  /* 设置背景色为透明 */
  border: none;
  /* 去除边框 */
  box-shadow: none;
  /* 去除阴影 */
}

/* 如果你想要当鼠标悬浮时也去除效果 */
.el-input__wrapper:hover {
  border: none;
  box-shadow: none;
}

.el-input__inner {
  color: white;
  letter-spacing: 2px;
}
</style>
